<template>
	<view>
		<uni-nav-bar shadow :title="title" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#FFFFFF" :shadow="false" left-icon="left"></uni-nav-bar>
		<view class="container">
			<view style="position: relative;">
				<video id="myVideo" :src="src" @loadedmetadata='loadedmetadata' @timeupdate='playTimes'
					@error="videoErrorCallback" controls>
					<view class="head-top">
						<image class="image" src="../../static/images/yicha/logo.png" mode=""></image>
					</view>
					<view class="video-infor">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view>
					<!-- <view class="video-infor-2">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view> -->
				</video>
			</view>
		</view>
		<view class="detail-info">
			<u-parse :html="detailInfo"></u-parse>
		</view>
		<share-modal :userid='shoreId' ref="ShareModal"></share-modal>
		<uni-popup is-mask-click='false' :mask-click='false' style="background-color:rgba(0,0,0,.4); z-index: 101;" id="SureSubmit"
			ref="SureSubmit" type="dialog">
			<view class="floatcontainer">
				<view class="text">
					暂无授权,授权后方可查看,请联系客服18926048918
				</view>

				<view class="btnContainer">
					<button type="default" @click="$wanlshop.back(1)">关闭</button>
					<!-- 			<button type="primary" @click="buy()"
						style="background: #8CBF6B;color: #fff;">购买</button> -->
				</view>
			</view>
		</uni-popup>
		<view v-show="!isSharePage" @tap="$wanlshop.auth('/pages/teacher/userCard')" class="changeCardBtn">
			更改名片
		</view>
		<ad-modal ref="adModal" @jumpAd='jumpAd'></ad-modal>
	</view>

</template>

<script>
	import shareModal from '@/pages/teacher/components/shareModal.vue'
	import share from '@/shopro/share/index.js'
	import jssdk from '@/common/libs/jssdk.js'
	import adModal from '@/pages/teacher/components/adModal.vue'
	export default {
		components: {
			shareModal,
			adModal
		},
		data() {
			return {
				user: {},
				username: '',
				id: '',
				title: '',
				AllList: [],
				currentPage: '1',
				src: '',
				package_vip: "",
				isSharePage: false,
				playTime: 0,
				shoreDesc: '',
				shorePic: "",
				shoreId: '',
				detailInfo: "",
				freeTime: "",
				videoInfo:{}
			}
		},
		onLoad: function(option) {
			this.id = option.id;
			this.title = option.name;
			this.type = option.type
			this.user = uni.getStorageSync('userInfo')
			// this.setShare()
			this.getList()
			if (window.location.href.indexOf('&isShare=true') !== -1) {
				this.isSharePage = true
				this.shoreId = option.userid
			}
		},
		onHide() {
			uni.hideLoading()
		},
		watch: {
			playTime(val, up) {
				console.log(5656565, val, up)
				if (val === 0) {
					// uni.showLoading({
					// 	title: "加载中..."
					// })
				} else {
					uni.hideLoading()
				}
			}
		},
		onReady() {
			// this.getList()
		},
		methods: {
			loadedmetadata(e) {
				this.playTime = e.detail.duration
			},
			setShare() {
				let shareId = uni.getStorageSync('userInfo').id
				this.SpmResult = share.setShareInfo({
					title: this.title,
					desc: '',
					image: '',
					params: {
						page: 2,
						pageId: this.id,
						shareId: shareId
					}
				});
				// let link = window.location.href + '&isShare=true&userid=' + shareId + '&' + this.SpmResult.query

				let url = window.location.href.split('&')
				let link = url[0] + url[1] + url[2] + '&isShare=true&userid=' + shareId + '&' + this.SpmResult.query

				jssdk.share({
					title: this.title,
					desc: this.shoreDesc,
					// link:encodeURIComponent(link),
					link: link,
					imgUrl: this.shorePic,
					type: '2',
					id: this.id
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			playTimes(e) {
				var currentime = e.detail.currentTime
				// let ads = this.videoInfo.news_list
				// ads.forEach(item => {
				
				// 	if (Number(item.seconds) <= currentime && this.hideAd) {
				// 		uni.createVideoContext('myVideo').pause()
				// 		uni.createVideoContext('myVideo').exitFullScreen()
				// 		this.$refs.adModal.showModal(item)
				// 		return
				// 	}
				// })

				if (currentime >= this.freeTime && this.package_vip == '0') {
					this.$refs.SureSubmit.open()
					uni.createVideoContext('myVideo').pause()
				}
			},
			
			getList() {
				console.log(this.id)
				// let url = this.type == 'courses' ? '/course/detail' : this.type == 'study' ? '/study/detail' : ''

				this.$api.post({
					url: '/handwork/detail',
					data: {
						id: this.id
					},
					// contentType: 'application/json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					// dataType:'json',
					success: res => {
						console.log(res);
						this.videoInfo = res
						this.shoreDesc = res.desc
						this.detailInfo = res.content
						this.freeTime = res.seconds
						this.shorePic = res.image
						this.package_vip = res.package_vip
						this.src = res.handwork_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
						this.title = res.name
						// 		this.AllList = res.list;

						this.setShare()

					},
					fail: error => {
						console.log(error)
						uni.showToast({
							title: error.data.msg,
							icon: 'error'
						}) 
						if (this.isSharePage) {
							uni.navigateTo({
								url: '/pages/user/auth/auth'
							})
						} else {
							this.$wanlshop.back(1)
						}
						// setTimeout(()=>{
						// 	this.$wanlshop.back(1)
						// },1500)
					}
				})
				if (this.playTime == 0 && this.$u.os()!="ios") {
					setTimeout(() => {
						uni.showLoading({
							title: "视频加载中...",
							mask: true
						})
					}, 1000)

				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 28rpx;

		#myVideo {
			width: 100%;
			height: 422rpx;
		}
	}
	/deep/.uni-video-bar{
		z-index: 100;
	}
	
	.detail-info{
		margin: 20rpx 20rpx;
		min-height: 100rpx;
		padding: 20rpx;
	}

	.head-top {
		position: absolute;
		height: 60rpx;
		width: 60rpx;
		top: 20rpx;
		left: 20rpx;
		color: #fff;
		.image{
			width: 60rpx;
			height: 60rpx;
		}
	}

	.video-infor {
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		min-width: 250rpx;
		font-size: 24rpx;
		color: #333;
		line-height: 30rpx;
		z-index: 99;
		padding-left: 30rpx;

		.left {
			background-color: #aed0fd;
			color: #333;
			padding: 10rpx;
			border-radius: 120rpx;
			// margin-left: 10rpx;
			// padding-right: 80rpx;

			text {
				display: block;
				font-size: 18rpx;
				line-height: 25rpx;
				margin-left: 50rpx;
			}
		}

		.right {
			position: absolute;
			left: 0;
			border-radius: 50%;
			overflow: hidden;
			bottom: 0;
			width: 80rpx;
			height: 80rpx;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}

	.video-infor-2 {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		min-width: 300rpx;
		font-size: 24rpx;
		color: #333;
		line-height: 30rpx;
		z-index: 99;
		padding-left: 30rpx;

		.left {
			background-color: #aed0fd;
			color: #333;
			padding: 10rpx;
			border-radius: 120rpx;
			margin-right: 10rpx;
			// padding-right: 80rpx;

			text {
				display: block;
				font-size: 18rpx;
				line-height: 25rpx;
				margin-left: 0rpx;
			}
		}

		.right {
			position: absolute;
			right: 0;
			border-radius: 50%;
			overflow: hidden;
			bottom: 0;
			width: 80rpx;
			height: 80rpx;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}

	.floatcontainer {
		width: 630rpx;
		height: 320rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 400rpx auto;
		padding-top: 72rpx;
	}

	.text {
		margin: 0 auto 88rpx;
		text-align: center;
	}

	.btnContainer {
		display: flex;
		justify-content: space-around;

		button {
			width: 100px;
			height: 30px;
			background: #fff;
			font-size: 13px;
			font-family: PingFang-SC-Medium-, PingFang-SC-Medium;
			font-weight: normal;
			color: #333333;
		}
	}

	.changeCardBtn {
		width: 538rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #98E05F, #0DE3AC);
		box-shadow: 0px 2px 5px 0px rgba(30, 36, 34, 0.3);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		bottom: 30rpx;
		margin: auto;
		left: 0;
		right: 0;
	}
</style>
